<html>
<head>
</head>
<body>
<wicket:panel>
	    <div style="margin:5px;">
	    	<div wicket:id="stateFragment">Appropriate fragment goes here!</div>
        </div>
		
		<!-- Backup creation fragment -->
		<wicket:fragment wicket:id="createNew">
			<h4 style="margin:5px 0px;">Create Backup Files</h4>
			<div style="width:700px; padding: 5px; -moz-border-radius:5px; border: 1px solid #DEDDEF;">
				<!-- CREATE BACKUP -->
	          	<h5>Generate New Backup Files Now</h5>
	          	<div style="padding:5px 5px 20px; border-bottom: dashed 1px #DEDDEF;" class="clearfix">
	          		<p style="font-size:12px;">To start backup process click "create backup" button. This may take sometime if the data is too big</p>
	          		<form wicket:id="startBkp">
		          		<div>
			        		<div style="float:right;">
			        			<input class="es-button ui-state-default ui-corner-all" type="submit" value="Create Backup" id="startBkp" />                           				
			        		</div>
			        		<div title="Confirm creating backup?" wicket:id="alertBeforeStart">
			        			<p>
			        			You are about to start backup process. Depending on amount of data to be backed up 
			        			and server capabilities, backup may take anything from few minutes to couple of hours.
			        			</p>
			        			<p>
			        			To ensure a successful back-up, it is advised that
			        			</p>
			        			<ol>
			        				<li>Make sure that there is enough disk space on 
			        				the server (at least equal to the data being backed up).</li>
			        				<li>Start backup when server activity is low.</li>
			        			</ol>
			        			<p>Click OK to process. Click Cancel to go back.</p>
			        		</div>
		          		</div>
		          	</form>
	          	</div>
	          	<div style="padding: 20px 0px;">
	          		<div wicket:id="lastbkpDiv">last backup goes here!</div>
	          	</div>
	       </div>
		</wicket:fragment>
		
		
		<!-- Backup is processing fragment -->
		<wicket:fragment wicket:id="bkpProcessingFrag">
			<!-- BACKUP PROCESSING -->
			<div wicket:id="tmpStts"></div>
           	<div class="es-warn" style="width:400px; margin:5px;">
           		<div wicket:id="bkpProcessing">
	           		<form id="processingBkp">
	           			<p class="es-bg-processing" style="background-repeat:no-repeat; padding-left:20px; font-weight:bold;">Please wait, backup task is in progress.</p>
	       				<input class="es-button ui-state-default ui-corner-all" type="submit" value="Cancel Backup Creation" id="bkpbtn"/>
	       			</form> 
	       		</div>
	       		<div wicket:id="bkpSuccessful">
	           		<span style="float:left; margin:0px 5px;" class="ui-icon ui-icon-check"></span>
	       			<p style="font-size:13px; padding-left:30px"">Backup has been taken successfully. Click on the link below to see/download backed-up file.</p>
	       			<p style="padding-left:30px"><a wicket:id="flBkpLnk" href="#"><span wicket:id="flBkpName">Backup files</span></a></p>
	       		</div>
       			<div style="border:1px solid white;margin:10px;">
       				<div wicket:id="procList"  style="margin-bottom: 10px; font-size:13px"">
       					<span style="float:left; margin:0px 5px;" class="ui-icon" wicket:id="iconSpan">icon</span>
       					<span wicket:id="procName">process</span>
       				</div>
       			</div>                    				
           	</div>
        </wicket:fragment>
        
        <!-- newly created backup file list -->
        <wicket:fragment wicket:id="bkpFiles">
        	<!-- BACKUP CREATED -->
         	<div>
         		<h5>Latest Generated Backup Files</h5>
         		<p>These are the latest successful backup files. You may download them to restore the system to the time when this backup was created. Please avoid creating backups when not required.</p>
         		<p><strong>Backup Files created on <span wicket:id="creationTimestamp">timestamp</span></strong></p>
         		<table class="stripes" style="margin-left:20px;">
         			<tr wicket:id="bkpFiles">
         				<td style="width:350px; text-align:left;"><a wicket:id="fileName" href="#">config.xml</a></td>
         				<td style="width:150px"><a wicket:id="dldLink" href="#" class="external">Download</a></td>
         			</tr>
         		</table>
         	</div>
        </wicket:fragment>
        
</wicket:panel>
</body>
</html>